<template>
  <div class="light-management">
    <el-card>
      <el-button type="primary" @click="openAddDialog" style="margin-bottom: 16px;">添加灯光</el-button>
      <el-dialog v-model="addDialogVisible" title="添加灯光" width="400px">
        <el-form :model="addForm" label-width="80px">
          <el-form-item label="楼宇">
            <el-select v-model="addForm.buildingId" placeholder="请选择楼宇">
              <el-option v-for="(name, id) in buildingMap" :key="id" :label="name" :value="id" />
            </el-select>
          </el-form-item>
          <el-form-item label="小区">
            <el-select v-model="addForm.communityId" placeholder="请选择小区">
              <el-option v-for="(name, id) in communityMap" :key="id" :label="name" :value="id" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="addForm.status" placeholder="请选择状态">
              <el-option label="可用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="使用情况">
            <el-select v-model="addForm.used" placeholder="请选择使用情况">
              <el-option label="开启" :value="1" />
              <el-option label="关闭" :value="0" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddLight">确定</el-button>
        </template>
      </el-dialog>
      <h2>灯光管理</h2>
      <el-table :data="lights" style="width: 100%" border>
        <el-table-column prop="id" label="灯光ID" width="100" />
        <el-table-column label="楼宇">
          <template #default="scope">
            {{ buildingMap[scope.row.buildingId] || scope.row.buildingId }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <span>{{ getStatusText(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="used" label="使用情况">
          <template #default="scope">
            <span>{{ getUsedText(scope.row.used) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="小区">
          <template #default="scope">
            {{ communityMap[scope.row.communityId] || scope.row.communityId }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-switch
              v-model="scope.row.used"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(scope.row)"
              active-text="开"
              inactive-text="关"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '../utils/request'

const lights = ref([])
const buildingMap = ref({})
const communityMap = ref({})

const fetchLights = async () => {
  try {
    const res = await request.get('/infrastructure-server/light/all')
    lights.value = res.data
  } catch (e) {
    ElMessage.error('获取灯光列表失败')
  }
}

const fetchBuildings = async () => {
  try {
    const res = await request.get('/infrastructure-server/building/all')
    buildingMap.value = Object.fromEntries(res.data.map(b => [b.id, b.name]))
  } catch (e) {
    ElMessage.error('获取楼宇列表失败')
  }
}

const fetchCommunities = async () => {
  try {
    const res = await request.get('/infrastructure-server/community/all')
    communityMap.value = Object.fromEntries(res.data.map(c => [c.id, c.name]))
  } catch (e) {
    ElMessage.error('获取小区列表失败')
  }
}

const handleStatusChange = async (light) => {
  try {
    const res = await request.put(`/infrastructure-server/light/${light.id}/used?used=${light.used}`)
    if (res.data) {
      ElMessage.success(light.used === 1 ? '灯光已开启' : '灯光已关闭')
    } else {
      ElMessage.error('操作失败')
      // 如果操作失败，恢复原状态
      light.used = light.used === 1 ? 0 : 1
    }
  } catch (e) {
    ElMessage.error('操作失败')
    // 如果操作失败，恢复原状态
    light.used = light.used === 1 ? 0 : 1
  }
}

function getStatusText(status) {
  return status === 1 ? '可用' : '禁用'
}
function getUsedText(used) {
  return used === 1 ? '开启' : '关闭'
}

const addDialogVisible = ref(false)
const addForm = ref({
  buildingId: '',
  communityId: '',
  status: 1,
  used: 0
})

const openAddDialog = () => {
  addForm.value = {
    buildingId: '',
    communityId: '',
    status: 1,
    used: 0
  }
  addDialogVisible.value = true
}

const handleAddLight = async () => {
  if (!addForm.value.buildingId || !addForm.value.communityId) {
    ElMessage.error('请选择楼宇和小区')
    return
  }
  try {
    const res = await request.post('/infrastructure-server/light/add', addForm.value)
    if (res.data) {
      ElMessage.success('添加成功')
      addDialogVisible.value = false
      fetchLights()
    } else {
      ElMessage.error('添加失败')
    }
  } catch (e) {
    ElMessage.error('添加失败')
  }
}

onMounted(() => {
  fetchLights()
  fetchBuildings()
  fetchCommunities()
})
</script>

<style scoped>
.light-management {
  padding: 20px;
}
</style> 